<template>
	<view class="ts-flex ts-column ts-flex-item">
		<view class="ts-flex ts-column">
			<button @tap="showBanner">显示弹窗</button>
		</view>
		<ts-popup v-model="hiddenPopupWindow" position="bottom" @close="handleClose">
			<ts-banner :image="image" height="250"></ts-banner>
			<button @click="closePopupWindow">关闭窗口</button>
		</ts-popup>
	</view>
</template>

<script>
	import tsBanner from "@/components/teaset/components/ts-banner.vue";
	import tsPopup from "@/components/teaset/components/ts-popup.vue";
	// import {tsPopup,tsBanner} from 'components/teaset/index.js';//目前不支持该语法
	export default {
		components: {
			tsBanner,
			tsPopup,
		},
		data() {return {
			hiddenPopupWindow: false, //隐藏弹出窗口
			image: 'http://beidian.zengqs.com/wp-content/uploads/elementor/thumbs/1528702340969-nskg8a25k719mluunqsofubjy6efqeui98a4wb5g3c.jpg'
		}},
		methods: {
			handleClose: function(val) {
				//记录广告点击、投放频率等信息
				console.log('close' + val);
			},
			closePopupWindow: function() {
				this.hiddenPopupWindow = true;
			},
			showBanner() {
				this.hiddenPopupWindow = false;
			}
		},
	}
</script>

<style>
	page view {
		display: flex;
		flex-direction: row;
	}
</style>
